<template>
  <div class="fm-tree">
      <a-radio-group v-model="defaultValue" v-if="!multiple">
              <draggable tag="ul" :list="data" 
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data" :key="index" >
                  <a-radio
                    value="item.value" 
                    style="margin-right: 5px;"
                    class="radio-set"
                  >
                    <a-input size="small" :style="{'width': showLabel? '89px': '188px' }" v-model="item.value"></a-input>
                    <a-input size="small" style="width:89px;" v-if="showLabel" v-model="item.label"></a-input>
                  </a-radio>
                  <i class="drag-item minus-circle" style="font-size: 16px;margin: 0 0px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                  <a-button class="radio-options-del" @click="handleOptionsRemove(index)" shape="circle" plain type="danger" size="small" icon="minus" style="padding: 4px;margin-left: 5px;"></a-button>
                  <div class="fm-tree-children" v-if="item.children && item.children.length>0">
                      <fm-tree :data="item.children" :multiple="multiple" :defaultValue="defaultValue" :showLabel="showLabel"></fm-tree>
                  </div> 
                  <a-button type="link" @click="handleAddSubOption(item.children)">{{item.value}}-{{$t('fm.actions.addSubOption')}}</a-button>  
                </li>
              </draggable>
            </a-radio-group>
             <!-- <li v-for="(item, index) in data" :key="index" >
                    <draggable tag="ul" :list="data" 
                        v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                        handle=".drag-item"
                    >
                        <div>
                            <a-radio
                                value="item.value" 
                                style="margin-right: 5px;"
                                class="radio-set"
                            >
                                <a-input size="small" :style="{'width': showLabel? '89px': '188px' }" v-model="item.value"></a-input>
                                <a-input size="small" style="width:89px;" v-if="showLabel" v-model="item.label"></a-input>
                            </a-radio>
                            <i class="drag-item minus-circle" style="font-size: 16px;margin: 0 0px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                            <a-button class="radio-options-del" @click="handleOptionsRemove(index)" shape="circle" plain type="danger" size="small" icon="minus" style="padding: 4px;margin-left: 5px;"></a-button>
                        </div>
                        <a-button type="link" @click="handleAddSubOption(item.children)">{{item.value}}-{{$t('fm.actions.addSubOption')}}</a-button>      
                    </draggable>
                    <div class="fm-tree-children" v-if="item.children && item.children.length>0">
                        <fm-tree :data="item.children" :multiple="multiple" :defaultValue="defaultValue" :showLabel="showLabel"></fm-tree>
                    </div> 
                </li> -->
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
export default {
  name:'fm-tree',
  components: {
    Draggable
  },
  props:['data','multiple','defaultValue','showLabel'],
  data () {
    return {
     
    }
  },
  mounted () {
  },
  methods: {
      handleOptionsRemove (index) {
       this.data.splice(index, 1)
    },
    handleAddSubOption(list){
     if (this.showLabel) {
        list.push({
          value: this.$t('fm.config.widget.newOption'),
          label: this.$t('fm.config.widget.newOption')
        })
      } else {
        list.push({
          value: this.$t('fm.config.widget.newOption')
        })
      }
    }
  },
  watch: {
    // 'watchFeild': {
    //   deep: true,
    //   handler (val) {
    //    
    //   }
    // }
  }
}
</script>

<style lang="scss">
    .fm-tree{
        .fm-tree-children{
            // margin-left: 5px;
        }
    }
</style>
